import React from 'react';
import { Button, Table, Space, Modal, Pagination, Popconfirm, message, Form, Input, DatePicker  } from 'antd';
import indexStyle from './index.module.css'

/* function Todo() {
  return (
    <div>
		<DatePicker />
		<Button type="primary">test</Button>
    </div>
  );
} */
class Todo extends React.Component{
	constructor(props){
		super(props)
		this.state = {
			todoName: 'zqf',
			dataSource: [],
			visible: false,
			pagination: {
				currentPage: 1,
				pageSize: 10,
				total: 0,
			},
		}
	}
	componentDidMount() {
		console.log('didmount')
		this.loadDataList()
	}
	loadDataList () {
		const {currentPage, pageSize, total} = this.state.pagination
		React.$post('/list', {
			currentPage,
			pageSize,
		}).then(res => {
			console.log(res)
			const { rows } = res.data
			let tableData = rows.map(item => {
				return Object.assign(item, {key: item.id})
			})
			this.setState({
				dataSource: tableData,
				pagination: Object.assign(this.state.pagination, {total: res.count}),
			})
		}).catch(err => {console.log(err)})
	}
	modify = (id) => {
		console.log(id)
		message.info('Clicked on Yes.');
	}
	deleteItem = (id) => {
		console.log(id)
		React.$post('/delete', {
			id
		}).then(res => {
	    	console.log(res)
			this.loadDataList()
			message.info(res.message)
	    }).catch(err => {console.log(err)})
	}
	showModal = () => {
		this.setState({
			visible: true,
		});
	}

	handleOk = async () => {
		const {todoName, content, deadline} = this.state
		React.$post('/create', {
			name: todoName,
				content,
				deadline,
		}).then(res => {
			if(res.code === 0){
				message.info(res.message)
				this.loadDataList()
				this.setState({
					visible: false,
				})
			}else{
				message.error(res.message)
			}
			
		}).catch(err => { console.log(err) })
	};

	handleCancel = e => {
		console.log(e);
		this.setState({
			visible: false,
		});
	}

	onShowSizeChange = (current, pageSize) => {
		console.log(current, pageSize)
		this.setState({
			pagination: Object.assign(this.state.pagination, {currentPage: current, pageSize})
		},()=>{
			this.loadDataList()
		})
	}

	onChange = (current, pageSize) => {
		this.setState({
			pagination: Object.assign(this.state.pagination, {currentPage: current, pageSize})
		}, ()=>{
			console.log('pageChange')
			this.loadDataList()
			console.log(current, pageSize);

		})
	}

	//复用change事件处理器，方法一：使用bind()绑定this并传入value的绑定值,方法二：表单增加name属性和value绑定的值相同，作为参数处理
	handleChange = (e) => {
		e.persist()
		console.log(e)
		if(e.type === 'change'){
			this.setState({
				[e.target.name]: e.target.value
			})
		}
	}
	
	render(){
		const tableColumns = [
			{
				title: '名称',
				dataIndex: 'name',
				key: 'name',
				render: text => <a>{text}</a>,
			},
			{
				title: '内容',
				dataIndex: 'content',
				key: 'content',
			},
			{
				title: '期限',
				dataIndex: 'deadline',
				key: 'deadline',
			},
			{
				title: '操作',
				key: 'action',
				render: (text, record) => (
					<Space size="middle">
						<Popconfirm placement="top" title={'确认删除吗？'} onConfirm={() => this.deleteItem(record.id)} okText="确定" cancelText="取消">
							<a>删除</a>
      					</Popconfirm>
						<Button onClick={() => this.modify(record.id)}>修改</Button>
					</Space>
				),
			},
		]
		const onFinish = (values) => {
			console.log('Success:', values);
		  };
		
		  const onFinishFailed = (errorInfo) => {
			console.log('Failed:', errorInfo);
		  };
		

		const layout = {
			labelCol: { span: 8 },
			wrapperCol: { span: 16 },
		};

		const {currentPage, pageSize, total} = this.state.pagination
		return (
			<div>
				<h3 className={indexStyle.title}>Todo组件：实现todolist功能，全局封装get/post方法并挂载到react，动态绑定this及组件内部样式xxx.module.css使用</h3>
				<Button type="primary" onClick={this.showModal}>点击添加待办事项</Button>
				<Table
					columns={tableColumns}
					dataSource={this.state.dataSource}
					pagination={false}
				/>
				<Pagination
					showSizeChanger
					onShowSizeChange={this.onShowSizeChange}
					onChange={this.onChange}
					current={currentPage}
					defaultCurrent={1}
					total={total}
					showTotal={totals => `共 ${totals} 条数据`}
				/>
				<Modal
					title="Basic Modal"
					visible={this.state.visible}
					onOk={this.handleOk}
					onCancel={this.handleCancel}
				>
					<Form {...layout} name="basic" 
					onFinish={onFinish}
      				onFinishFailed={onFinishFailed}>
						<Form.Item label="名称" name="name" rules={[{ required: true, message: '请输入名称' }]}>
							<Input placeholder="请输入名称" name="todoName" value={this.state.todoName} onChange={this.handleChange} />
						</Form.Item>
						<Form.Item label="内容" name="content" rules={[{ required: true, message: '请输入内容' }]}>
							<Input placeholder="请输入内容" name="content" value={this.state.content} onChange={this.handleChange} />
						</Form.Item>
						<Form.Item label="期限" name="deadline" rules={[{ required: true, message: '请选择日期' }]}>
							<Input placeholder="请输入日期" name="deadline" value={this.state.deadline} onChange={this.handleChange} />
						</Form.Item>
					</Form>
				</Modal>
			</div>
		)
	}
}

export default Todo;
